<template>
	<view class="zone">
		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar2">
					<view class="n_left">
						<u-icon class="back" size="20px" color="#000" @click="$p.back()" name="arrow-left"></u-icon>
						<text>真假美猴王第一关</text>
					</view>
				</view>
			</view>
		</u-navbar>

		


		<image class="posa1" @click="$p.navto('/pages/duoBao/m_rule')" src="http://img.cpgm.cc/panda/static/monkey/1.png" mode="widthFix" />
		<image class="posa2" @click="$p.navto('/pages/duoBao/m_strategy')" src="http://img.cpgm.cc/panda/static/monkey/2.png" mode="widthFix" />
		<image class="posa3" @click="$p.navto('/pages/duoBao/m_log')" src="http://img.cpgm.cc/panda/static/monkey/3.png" mode="widthFix" />

		<view class="main">
			<!-- 资产部分 -->
			<view class="property">
				<view>
					<image class="jq" src="http://img.cpgm.cc/panda/static/monkey/jq.png" mode="widthFix" />
					<text>200</text>
				</view>
				<view>
					<image src="http://img.cpgm.cc/panda/static/monkey/sj.png" mode="widthFix" />
					<text>200</text>
				</view>
			</view>

			<!-- 三个盒子部分 -->
			<view class="box">
				<view @click="$p.navto('/pages/duoBao/tophunderd')">
					<image src="http://img.cpgm.cc/panda/static/monkey/box1.png" mode="widthFix" />
					<p>彩劵奖池</p>
				</view>
				<view @click="$p.navto('/pages/duoBao/toady')">
					<image src="http://img.cpgm.cc/panda/static/monkey/box2.png" mode="widthFix" />
					<p>本关大奖</p>
				</view>
				<view>
					<image src="http://img.cpgm.cc/panda/static/monkey/box3.png" mode="widthFix" />
					<p>关卡奖励</p>
				</view>
			</view>

			<view class="content">
				<view class="item" v-for="(item,index) in 25" :key="index" >
					<image src="http://img.cpgm.cc/panda/static/monkey/card.png" mode="widthFix" />
					<image src="http://img.cpgm.cc/panda/static/monkey/tx.png" mode="widthFix" />
				</view>
			</view>

			<view class="bottom">
				<view class="choose_item" v-for="(item , index) in clist" :key="index">
					<text>选{{item.num}}个</text>
					<view>
						<image src="http://img.cpgm.cc/panda/static/monkey/sj.png" mode="widthFix" />
						<text>{{item.num}}</text>
					</view>
					<text class="rate">猜中概率{{item.rate}}%</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					background: "url('http://img.cpgm.cc/panda/static/monkey/bg.png')",
					backgroundSize:'100% auto'
				},
				clist:[
					{
						id:1,
						num:1,
						rate:25,
					},
					{
						id:2,
						num:2,
						rate:50,
					},
					{
						id:3,
						num:2,
						rate:75,
					},
					{
						id:4,
						num:0,
						rate:75,
					},
					
				],//选择列表
				stat:-1,
				animationData:{},
			};
		},
		methods: {
			// 翻转动画
			turnAnimation(index) {
				this.stat = index
				var animation = uni.createAnimation({
					duration: 2000,
					timingFunction: 'ease', //linear 全程匀速运动  ease 动画以低速开始，然后加快，在结束前变慢
				})
				this.animation = animation
				animation.rotateY(360).step()
				this.animationData = animation.export()
				setTimeout(()=>{
					
				} , 2000)
			}
		},
	}
</script>

<style lang="less">

.zone {
	background: url('http://img.cpgm.cc/panda/static/monkey/bg.png') no-repeat;
	background-size: 100% 100%;
	min-height: 100vh;
}

.nav-bar2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 60px;
		padding: 0px 10px;
	}

	.n_left {
		text {
			color: #000;
			font-weight: 600;
			font-size: 24px;
			margin-left: 5px;
		}
	}

	.shouxu {
		color: #fff;
		font-size: 14px;
	}


.main {
	padding: 30px 10px 10px;
}

// 我的资产部分
.property {
	display: flex;
	align-items: center;

	view {
		min-width: 80px;
		position: relative;
		padding: 2px 5px 2px 20px;
		background: #FFFFFF;
		border-radius: 9px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;


		image {
			width: 25px;
			position: absolute;
			left: 0;
		}

		.jq {
			width: 30px;
		}
		text {
			font-size: 14px;
			font-weight: 600;
		}
	}
}

// 顶部三个入口
.posa1 {
	width: 45px;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 9999;
}
.posa2 {
	width: 45px;
	position: absolute;
	top: 62px;
	right: 10px;
	z-index: 9999;
}

.posa3 {
	width: 45px;
	position: absolute;
	top: 114px;
	right: 10px;
}

// 三个盒子部分
.box {	
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 40px;
	view {
		width: 25%;
		display: flex;
		flex-direction: column;


		image {
			width: 100%;
		}
		p {
			font-size: 12px;
			font-weight: 600;
		}
	}

	view:nth-child(2) {
		width: 45%;

		p {
			font-size: 14px;
			font-weight: 600;
		}
	}

	p {
		padding: 5px 0;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 9px;
		width: 90%;
		text-align: center;
		margin-top: -10px;
		position: relative;
	}
}

// 内容部分
.content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 10px 0;

	.item {
		position: relative;
		width: 19%;
		margin: 0 0.5%;

		image {
			width: 100%;
		}

		image:nth-child(2) {
			position: absolute;
			bottom: 10px;
			right: 6px;
			width: 30%;
		}
	}
}

// 底部选择

.bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.choose_item {
		width: 24%;
		background: rgba(255,255,255,0.68);
		border-radius: 9px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;

		view {
			width: 100%;
			background: rgba(168, 140, 142, 0.41);
			padding-right: 10px;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			margin: 10px 0;
			color: #000;
			font-size: 16px;

			image {
				width: 20px;
			}
		}
	}
}

.rate {
	font-size: 12px;
	zoom: 0.9;
}













</style>
